import React, { useContext } from 'react'
import { TodoContext } from '../../todoContext'

const Footer = () => {
    const { list, setList } = useContext(TodoContext)
    const dones = list.filter(item => item.done == true).length;
    const totals = list.length;
    const changeAllStatus = (e) => {
        list.map(item => item.done = e.currentTarget.checked);
        setList(list => [...list]);
    }
    const deleteAllDone = () => {
        setList(list => list.filter(item => item.done !== true))
    }
    return (
        <div className='footer-wrapper'>
            <input type='checkbox' onChange={changeAllStatus} checked={totals > 0 && dones == totals} className='form-control' />
            已完成 {dones} / 全部 {totals}
            <button onClick={deleteAllDone}>清除已完成</button>
        </div>
    )
}

export default Footer